<template>
  <div class="project-detail">
    <div class="split-layout">
      <el-scrollbar class="left-panel">
        <el-card>
          <div slot="header" class="clearfix">
            <span>{{ $t('project.information') }}</span>
          </div>
          <el-form
            ref="postForm"
            :model="postForm"
            label-width="100px"
            label-position="left"
            size="mini"
          >
            <el-form-item label="Order No">
              <el-input v-model="postForm.OrderNo" />
            </el-form-item>
            <el-form-item label="Project No">
              <el-input v-model="postForm.ProjectNo" />
            </el-form-item>
            <el-form-item label="Sub No">
              <el-input v-model="postForm.SubNo" />
            </el-form-item>
            <el-form-item label="Barcode">
              <el-input v-model="postForm.BarCode" type="textarea" />
            </el-form-item>
            <el-form-item label="Service">
              <el-select v-model="postForm.Service" class="full-width" />
            </el-form-item>
            <el-form-item label="PE">
              <el-select v-model="postForm.Pe" class="full-width" />
            </el-form-item>
            <el-form-item label="CS">
              <el-select v-model="postForm.Cs" class="full-width" />
            </el-form-item>
            <el-form-item label="Reviewer">
              <el-select v-model="postForm.Reviewer" class="full-width" />
            </el-form-item>
            <el-form-item label="Deadline">
              <el-date-picker
                v-model="postForm.TimeMs.Deadline"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item label="Certification">
              <el-select v-model="postForm.Certification" class="full-width" />
            </el-form-item>
            <el-form-item label="Order Type">
              <el-select v-model="postForm.OrderType" class="full-width" />
            </el-form-item>
            <el-form-item label="Urgent Case">
              <el-radio-group v-model="postForm.UrgentCase">
                <el-radio-button :label="1">Yes</el-radio-button>
                <el-radio-button :label="0">No</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="Amount">
              <el-input v-model="postForm.Amount" type="number" />
            </el-form-item>
          </el-form>
          <el-form
            ref="postForm"
            :model="postForm"
            label-width="100px"
            label-position="top"
            size="small"
          >
            <el-form-item label="Remark For PE" label-position="top">
              <el-input v-model="postForm.Remark" type="textarea" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-scrollbar>

      <el-scrollbar class="right-panel">
        <el-card>
          <div slot="header" class="clearfix">
            <span>Applicant Information</span>
          </div>
          <el-form
            ref="postForm"
            :model="postForm"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="Applicant">
              <el-input v-model="postForm.Applicant" />
            </el-form-item>
            <el-form-item label="Address">
              <el-input v-model="postForm.ApplicantAddress" />
            </el-form-item>
          </el-form>
          <el-table
            :data="postForm.ManufacturerList"
            border
            fit
            size="mini"
          >
            <el-table-column label="Manufacturer" width="300px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.Title" />
              </template>
            </el-table-column>
            <el-table-column label="Address">
              <template slot-scope="scope">
                <el-input v-model="scope.row.Address" />
              </template>
            </el-table-column>
            <el-table-column width="80" align="center">
              <template slot="header">
                <el-button type="primary" icon="el-icon-plus" @click="onAddManufacturer" />
              </template>
            </el-table-column>
          </el-table>

          <el-table
            :data="postForm.FactoryList"
            border
            fit
            size="small"
            style="margin-top: 10px"
          >
            <el-table-column label="Factory" width="300px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.Title" />
              </template>
            </el-table-column>
            <el-table-column label="Address">
              <template slot-scope="scope">
                <el-input v-model="scope.row.Address" />
              </template>
            </el-table-column>
            <el-table-column width="80" align="center">
              <template slot="header">
                <el-button type="primary" icon="el-icon-plus" @click="onAddFactory" />
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <el-card class="margin-top-10">
          <div slot="header" class="clearfix">
            <span>EUT Information</span>
          </div>
          <el-form
            ref="postForm"
            :model="postForm"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="EUT">
              <el-input v-model="postForm.Eut" />
            </el-form-item>
            <el-form-item label="Buyer">
              <el-input v-model="postForm.Buyer" />
            </el-form-item>
            <el-form-item label="Age Grading">
              <el-input v-model="postForm.AgeGrading" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-scrollbar>
    </div>
    <div class="project-action">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button plain>取消</el-button>
    </div>
  </div>
</template>

<script>
import { createProject, updateProject } from '@/api/project'

export default {
  name: 'ProjectDetail',
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: null
    }
  },
  watch: {
    value: {
      handler(val) {
        this.postForm = val
      },
      deep: true,
      immediate: true
    },
    postForm: {
      handler(val) {
        this.$emit('input', val)
        this.$emit('on-change', val)
      },
      deep: true
    }
  },
  methods: {
    onAddManufacturer() {
      this.postForm.ManufacturerList.push({ Title: '', Address: '' })
    },
    onAddFactory() {
      this.postForm.FactoryList.push({ Title: '', Address: '' })
    },
    async onSubmit() {
      const data = this.isEdit ? await updateProject(this.postForm) : await createProject(this.postForm)
      if (data.Message === 'ok') {
        this.$notify({
          title: this.$t('project.success'),
          message: this.$t('project.addSuccessAlert'),
          type: 'success',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.project-detail {
  height: 100%;
}

.project-action {
  padding-top: 5px;
  border-top: 1px solid #f3f3f3;
}

.split-layout {
  height: calc(100% - 42px);
  display: flex;
  padding-bottom: 5px;
}

.left-panel, .right-panel {
  height: 100%;
}

.left-panel {
  width: 365px;
  margin-right: 10px;
}

.right-panel {
  flex: 1 1 auto;
}
</style>
